我们在Vue中可以有3种不同的层面来实现应用的延迟加载和代码分离:
- 组件,也称为异步组件
- 路由
- Vuex模块
它们都有一个共同的地方:都使用从Webpack 2开始就支持的动态加载的方式。
1. 延迟加载Vue组件
- 该方法在Egghead的“在需要时使用Vue异步加载组件”文章中有详细的说明。
就像我们新建组件时使用import来引进一个函数那么简单:
|
|
定义一个组件:
|
|
通过将import()包装到箭头函数中,Vue将仅在需要的时候才加载该组件。
如果一个组件通过export导出了一个对象,那么可以在引入组件后返回的Promise上使用对象解构。例如,对于从keen-ui上获得UiAlert这个方法:
|
|
2. 延迟加载Vue路由
Vue路由支持延迟加载。它也像使用import来引进一个函数那么简单。假设我们想在/login路由下延迟加载一个Login组件:
|
|
3.延迟加载Vuex模块
Vuex提供registerModule的方法让我们动态地创建Vuex模块。因为考虑到我们从ES的模块中import函数后返回的是一个Promise,我们可以使用它来延迟加载所需的模块:
|
|
4. 结论
使用Vue和Webpack,使得延迟加载变得非常简单。使用你刚刚阅读的内容,可以从不同的方面分割你的项目代码,并且在需要时加载它们,从而加快应用的首次加载速度。